<template>
  <!-- 选项卡区 -->
  <div class="content-wrapper">
    <section class="content-header">
      <div class="row">
        <div class="col-md-12">
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <!-- 恒定不变的首页 -->
              <Tab :label="HOME" url="/" icon="fa fa-home"></Tab>
              <!-- 标签页 -->
              <Tab v-for="tab of $store.state.Tab.cachedTabs"
                   :key="tab.label"
                   :label="tab.label"
                   :icon="tab.icon"
                   :url="tab.url"
                   closable>
              </Tab>
              <!-- 标签页管理选项 -->
              <li class="dropdown pull-right" :class="{open:$store.state.Tab.isDropDown}">
                <a class="dropdown-toggle" @click.stop.prevent="toggleDropDown"><i class="fa fa-ellipsis-h"></i></a>
                <ul class="dropdown-menu">
                  <li><a href="javascript:void(0)" @click="closeAllTabs">关闭全部</a></li>
                  <li><a href="javascript:void(0)" @click="closeOtherTabs">关闭其他标签</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 内容区 -->
    <section
      class="content"
      v-loading="$store.state.isLoading"
      element-loading-text="拼命加载中...">
      <slot></slot>
    </section>
  </div>
</template>

<script>
  import Tab from "./Tab.vue";
  import {SET_ACTIVE_TAB, CLEAR_CACHED_TABS, ONLY_KEEP_ACTIVE_TAB, SET_TAB_BAR_DROP_DOWN} from "../../store/mutationTypes"
  import {HOME} from "../../assets/js/global"

  export default {
    name: "Tabs",
    data() {
      return {
        HOME
      }
    },
    methods: {
      closeAllTabs() {
        this.$store.commit(CLEAR_CACHED_TABS);
        this.$store.commit(SET_ACTIVE_TAB, HOME);
        this.$router.replace("/");
      },
      closeOtherTabs() {
        this.$store.commit(ONLY_KEEP_ACTIVE_TAB);
      },
      toggleDropDown() {
        this.$store.commit(SET_TAB_BAR_DROP_DOWN, !this.$store.state.Tab.isDropDown);
      }
    },
    components: {Tab}
  }
</script>



// WEBPACK FOOTER //
// Tabs.vue?5fd798e9
